<template>
	<view>
		<view class="topView">

		</view>
		<view class="title">
			实名认证安全保障
		</view>
		<view class="title1">为了保障您的资金安全，请填写与您身份证上的信息，否则不会通过认证。</view>
		<view class="bgView">
			<view class="title2">
				填写身份信息
			</view>
			<view class="flex-row-flex-start" style="height: 118rpx;">
				<view class="title3">
					姓名
				</view>
				<view class="inputView flex1">
					<input v-model="cert_name" type="text" placeholder="请填写姓名">
				</view>
			</view>
			<view class="line">

			</view>
			<view class="flex-row-flex-start" style="height: 118rpx;">
				<view class="title3">
					身份证号
				</view>
				<view class="inputView flex1">
					<input v-model="cert_no" type="text" placeholder="请填写身份证号">
				</view>
			</view>
			<view class="line">

			</view>

			<view class="itemView flex-row-space-between">
				<view class="title4">
					身份证照片
				</view>
			</view>

			<view class="flex-row-space-between">
				<view class="">
					<uploader @after-read="afterRead1" useSlot>
						<image mode="scaleToFill" class="uploadImage1"
							:src="ocr_front || require('../../static/settled/6.png')" />

					</uploader>
				</view>
				<view class="">
					<uploader @after-read="afterRead2" useSlot>
						<image mode="scaleToFill" class="uploadImage1"
							:src="ocr_back || require('../../static/settled/5.png')" />

					</uploader>
				</view>
			</view>

			<view class="itemView flex-row-space-between">
				<view class="title4">
					本人正脸照片
				</view>
			</view>
			<view class="flex-row-space-between">
				<view class="container">
					<!-- 拍照上传按钮 -->
					<button style="width: 300rpx; background-color: #FF4D40; color: #fff; border-color: #FF4D40; border-radius: 8rpx;" type="primary" @click="takePhoto">上传清晰照片</button>
					<!-- 预览照片 -->
					<image v-if="photo" :src="photo" class="preview"></image>
				</view>
			</view>

		</view>
		<view @click="buttonClick()" class="button flex-column-center">
			提交
		</view>
	</view>
</template>

<script>
	import {
		uploadFile,
		isWeixinClient,
		trottle,
	} from '@/utils/tools'
	import {
		mapState,
		mapActions
	} from 'vuex'
	import {
		getUserInfo,
		setUserInfo,
	} from "@/api/user";
	import {
		alipayAuth,
		noAuth,
		search_verify
	} from '@/api/user.js';
	export default {
		components: {},
		computed: {

		},
		data() {
			return {
				userInfo: {},
				cert_name: '',
				cert_no: '',
				ocr_front: '',
				ocr_back: '',
				ocr_face: '',
				photo: '',
			}
		},
		onShow() {

		},
		onLoad(e) {
			// this.$getUserInfo()
		},
		//下拉刷新
		onPullDownRefresh() {


		},
		//加载更多
		onReachBottom() {

		},

		methods: {
			afterRead1(e) {
				const file = e
				console.log(file)
				file.forEach(item => {
					uploadFile(item.path).then(res => {
						uni.hideLoading();
						this.ocr_front = res.url
					});
				})
			},
			afterRead2(e) {
				const file = e
				console.log(file)
				file.forEach(item => {
					uploadFile(item.path).then(res => {
						uni.hideLoading();
						this.ocr_back = res.url
					});
				})
			},
			// 拍照
			takePhoto() {
				uni.chooseImage({
					count: 1,
					sourceType: ['camera'], // 直接调用相机
					success: (res) => {
						this.photo = res.tempFilePaths[0] // 显示预览
						this.afterRead3(this.photo) // 上传服务器
					},
					fail: (err) => {
						console.error('拍照失败:', err)
					}
				})
			},
			afterRead3(e) {
				uploadFile(e).then(res => {
					uni.hideLoading();
					this.ocr_face = res.url
				});
			},
			// 上传照片
			$getUserInfo() {
				getUserInfo().then(res => {
					if (res.code == 1) {
						this.userInfo = res.data;
						this.$store.commit('SETUSERINFO', res.data);
					}
				});
			},
			search_verify(certify_id) {
				var that = this
				search_verify({
					certify_id
				}).then(res => {
					console.log('search_verify', res)
					that.showToast(res.msg)
					// if(res.code==1){
					setTimeout(() => {
						uni.navigateBack()
					}, 2000)
					// }
					// that.$getUserInfo()
				});
			},
			startAPVerify(data) {
				var that = this
				my.startAPVerify({
					url: data.url,
					certifyId: data.certify_id,
					success: function(res) {
						console.log('success', res)
						that.search_verify(data.certify_id)
					},
					fail: function(res) {
						console.log('fail', res)
					},
					complete: function(res) {
						console.log('complete', res)
					}
				})
			},
			buttonClick() {
				if (!this.cert_name.length) {
					this.showToast('请输入姓名')
					return
				}
				if (!this.cert_no.length) {
					this.showToast('请输入身份证号')
					return
				}
				if (!this.ocr_front.length) {
					this.showToast('请上传身份证正面')
					return
				}
				if (!this.ocr_back.length) {
					this.showToast('请上传身份证反面')
					return
				}
				if (!this.ocr_face.length) {
					this.showToast('请上传本人正脸照片')
					return
				}
				var that = this
				// alipayAuth({
				// 	cert_name:this.cert_name,
				// 	cert_no:this.cert_no,
				// 	ocr_front:this.ocr_front,
				// 	ocr_back:this.ocr_back
				// }).then(res => {
				// 	this.showToast(res.msg)
				// 	if(res.code==1){
				// 		that.startAPVerify(res.data)
				// 	}
				// });
				noAuth({
					cert_name: this.cert_name,
					cert_no: this.cert_no,
					ocr_front: this.ocr_front,
					ocr_back: this.ocr_back,
					ocr_face: this.ocr_face
				}).then(res => {
					if (res.code == 1) {
						// that.startAPVerify(res.data)
						// 返回上一页
						that.showToast("实名认证成功")
						// if(res.code==1){
						setTimeout(() => {
							uni.navigateBack()
						}, 2000)
					}
				});
			},
			showToast(title) {
				uni.showToast({
					title: title,
					icon: 'none'
				})
			},
			toUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style lang="scss">
	.topView {
		height: 648rpx;

		background-image: url($baseUrl+'/shiMing1.png');

		background-size: 100% 100%;

	}

	.title {
		margin-top: -410rpx;
		margin-left: 208rpx;

		font-size: 38rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 580;
		color: #fff;
	}

	.title1 {
		margin-top: 13rpx;
		margin-left: 208rpx;
		font-size: 27rpx;
		margin-right: 60rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #ffffffB3;
		line-height: 50rpx;
	}

	.bgView {
		padding: 30rpx;
		margin: 38rpx;
		background: #FFFFFF;
		border-radius: 11rpx 11rpx 11rpx 11rpx;
		opacity: 1;
	}

	.title2 {
		margin-bottom: 20rpx;
		font-size: 31rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 550;
		color: #333333;
	}

	.title3 {
		width: 140rpx;
		font-size: 27rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 550;
		color: #333333;
	}

	.title4 {
		margin-top: 30rpx;
		font-size: 27rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 550;
		color: #333333;
	}

	.inputView {
		input {
			font-size: 27rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 550;
			color: #333333;
		}
	}

	.line {
		height: 2rpx;
		background: #F6F9FB;
	}

	.button {
		margin: 135rpx 38rpx;
		height: 86rpx;
		background: #FF4D40;
		border-radius: 69rpx 69rpx 69rpx 69rpx;
		opacity: 1;
		font-size: 27rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.uploadImage1 {
		margin-top: 30rpx;
		width: 326*0.9rpx;
		height: 198*0.9rpx;
		border-radius: 11rpx 11rpx 11rpx 11rpx;
	}

	.container {
		padding: 20rpx 0;
	}

	.preview {
		margin-top: 20rpx;
		width: 300rpx;
		height: 300rpx;
		border-radius: 10rpx;
	}
</style>